<template>
  <div class="inviteBackView">
    <div class="inviteView">
      <img src="/web-hft-ee/static/img/university/member_invite_bg.png" class="inviteBgView"/>
      <div class="contentView">
        <div class="contentBox">
          <p class="title">企业邀请码</p>
          <div class="numberBox flex_between">
            <div v-for="item in registeCode" class="itemView">
              {{item}}
            </div>
          </div>
          <div class="functionBox flex_between">
            <div class="freshBox flex_start" @click="changeLink" >
              <img src="/web-hft-ee/static/img/university/refresh2.png"/>
              <div>刷新</div>
            </div>
            <div class="freshBox flex_start copyLabel" data-clipboard-action="copy" :data-clipboard-text="codeUrl"
                 @click="copyClick">
              <img src="/web-hft-ee/static/img/university/copy.png"/>
              <div>复制链接</div>
            </div>
          </div>
          <!--<div class="inviteQrCode">
            <vue-qr class="codeImg" :text="codeUrl" :size="70" margin="0"></vue-qr>
          </div>-->
          <div class="inviteButton" @click="inviteClick">邀请加盟</div>
        </div>
      </div>
    </div>

    <van-overlay :show="showGuidance" @click="showGuidance = false">
      <img class="guidance" src="/web-hft-ee/static/img/university/guidance.png"/>
    </van-overlay>

  </div>

</template>

<script>
  import clipboard from 'clipboard'
  import wx from 'weixin-js-sdk'
  import {ShareUtil} from '@/utils/share_utils'
  import TeamAPI from '@/repo/api/TeamAPI'
  import VueQr from 'vue-qr'
  import {Button, Toast, Overlay} from 'vant'
  import RegisterAPI from "../../../../repo/api/RegisterAPI";

  Vue.use(Button);
  Vue.use(Overlay);
  Vue.prototype.clipboard = clipboard;

  export default {
    name: "invite-enterprise",
    components: {
      VueQr
    },
    data() {
      return {
        teamId: this.$route.params.teamId,
        showGuidance: false,
        teamData: {},
        registeCode: '',
      }
    },
    mounted() {
      this.getTeamData()
    },
    computed: {
      imCreator() {
        if (this.teamId == this.$store.getters.enterpriseInfo.enterprise.id) {
          if (this.$store.getters.enterpriseRoleInfo.roleType == 2) {
            return true
          }
        }
        return false

      },
      codeUrl() {
        if (this.registeCode) {
          let host = window.location.origin;
          let hsId = this.$store.getters.hsId;
          let loginType = this.$store.getters.loginType;
          let path = `/web-hft-ee/enroll/${loginType}/${hsId}?unionId=${this.registeCode}&teamId=${this.teamId}`;
          return host + path
        } else {
          return ''
        }

      }
    },
    methods: {
      getTeamData() {

        if (!this.imCreator) {
          Toast('非企业总店负责人不可邀请门店加盟');
          return
        }

        TeamAPI.getTeamInfo(this.teamId).then((res) => {
          this.teamData = res.responseData.enterprise;
          RegisterAPI.getRegisteCode().then((result) => {
            this.registeCode = result.responseData;
            Toast.clear();
          }).catch(() => {
            Toast.clear();
          });


          let defaultPic = window.location.origin + `/web-hft-ee/static/img/default_company_head_portrait.png`;
          let pic = this.teamData.pic || defaultPic;
          console.log(pic);

          //注入微信分享数据
          ShareUtil.shareWx(["updateAppMessageShareData", "updateTimelineShareData"], () => {

            let msg = {
              title: `${this.$store.getters.userNickname}邀请你加盟${this.teamData.enterpriseName}`, // 分享标题
              desc: '门店加盟', // 分享描述
              link: this.codeUrl,
              imgUrl: pic,// 分享图标
              success: function () {
              },
              cancel: function () {
              }
            }

            wx.updateAppMessageShareData({
              title: msg.title,
              desc: msg.desc, // 分享描述
              link: msg.link,
              imgUrl: msg.imgUrl,
            });

            wx.updateTimelineShareData({
              title: msg.title,
              desc: msg.desc, // 分享描述
              link: msg.link,
              imgUrl: msg.imgUrl,
            });

          })

        }).catch(() => {
          Toast.clear()
        })
      },
      changeLink() {
        Toast.loading({
          duration: 0,
          message: '更新中...',
          forbidClick: true,
        });
        RegisterAPI.resetRegisteCode().then((res) => {
          this.registeCode = res.responseData;
          Toast.clear()
        }).catch(() => {
          Toast.clear()
        })

      },
      inviteClick() {
        this.showGuidance = true

      },
      copyClick() {
        let clipboard = new this.clipboard('.copyLabel');
        clipboard.on('success', function () {
          Toast('复制成功')
        });

        clipboard.on('error', function () {
          Toast('该浏览器不支持自动复制')
        })

      }
    }
  }
</script>

<style scoped>
  .inviteBackView {
    min-height: 100vh;
  }

  .inviteView {
    position: relative;
    min-height: 100vh;
    width: 100%;
  }

  .inviteBgView {
    width: 100%;
    height: 230px;
    position: absolute;
    top: 0;
    left: 0;
  }

  .contentView {
    position: absolute;
    top: 13.8%;
    left: 6.4%;
    z-index: 1;
    width: 87.2%;
    height: 341px;
    background: #FFFFFF;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.20);
    border-radius: 12px;
  }

  .copyLabel {
  }

  .guidance {
    width: 100%;

  }

  .title {
    font-family: PingFang-SC-Bold;
    font-size: 24px;
    color: #323334;
    font-weight: bold;
  }

  .contentBox {
    padding: 28px 20px 48px;
    height: 100%;
    box-sizing: border-box;
  }

  .numberBox {
    margin-top: 52px;
    height: 40px;
  }

  .itemView {
    background: #FFFFFF;
    border: 1px solid #E4E8EC;
    border-radius: 4px;
    height: 38px;
    font-family: PingFang-SC-Bold;
    font-size: 24px;
    color: #323334;
    text-align: center;
    width: 38px;
    line-height: 38px;
    font-weight: bold;
  }

  .functionBox {
    margin-top: 16px;

  }

  .freshBox {
    align-items: center;
    font-family: PingFang-SC-Medium;
    font-size: 14px;
    color: #323334;
    text-align: center;
  }

  .freshBox > img {
    width: 12px;
    height: 12px;
    margin-right: 4px;
  }

  .inviteButton {

    background-image: linear-gradient(225deg, #3ECFFA 0%, #1DA1F2 100%);
    border-radius: 24px;
    width: 180px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    margin: 48px auto 0;
    font-family: PingFang-SC-Bold;
    font-size: 16px;
    color: #FFFFFF;
    font-weight: bold;
  }
  .inviteQrCode{
    border-radius: 24px;
    width: 180px;
    height: 80px;
    line-height: 48px;
    text-align: center;
    margin:  0 auto;
    font-size: 16px;
    color: #FFFFFF;
  }
</style>
